<template>
    <a-modal
        :title="(!currRow ? '添加' : '编辑') + '自评项目'"
        :visible="isShowModal"
        width="40%"
        :footer="null"
        dialogClass="custom-modal"
        @cancel="handleCancel"
        :maskClosable="false"
    >
        <a-form-model
            :model="form"
            ref="form"
            :labelCol="{ span: 5 }"
            :wrapperCol="{ span: 19 }"
            :rules="rules"
            :colon="false"
        >
            <a-row :gutter="10">
                <a-col :span="24" class="mb16">
                    <a-form-model-item :label="form.level < 4 ? '评价分类' : '评价内容'" prop="name">
                        <a-textarea
                            :placeholder="form.level < 4 ? '请输入评价分类' : '请输入评价内容'"
                            v-model.trim="form.name"
                            allowClear
                            :auto-size="{ minRows: 5, maxRows: 6 }"
                        />
                    </a-form-model-item>
                </a-col>
                <a-col :span="24" class="mb16" v-if="form.level >= 4">
                    <a-form-model-item label="评价操作指南" prop="operationGuide">
                        <a-textarea
                            placeholder="请输入评价操作指南"
                            v-model.trim="form.operationGuide"
                            allowClear
                            :auto-size="{ minRows: 5, maxRows: 6 }"
                        />
                    </a-form-model-item>
                </a-col>
                <a-col :span="24" class="mb16" v-if="form.level >= 4">
                    <a-form-model-item label="分值" prop="score">
                        <a-input-number placeholder="请输入分值" v-model="form.score" :min="0" :max="100" />
                    </a-form-model-item>
                </a-col>

                <a-col :span="24" class="mb16">
                    <a-form-model-item label="排序" prop="sortNum">
                        <a-input-number placeholder="请输入排序" v-model="form.sortNum" :min="0" :max="1000" />
                    </a-form-model-item>
                </a-col>

                <a-col :span="24" class="mb16">
                    <a-form-model-item label="鼓励项" prop="isEncourage">
                        <a-checkbox v-model="form.isEncourage"></a-checkbox>
                    </a-form-model-item>
                </a-col>

                <a-col :span="24">
                    <a-button type="primary" class="fr" @click="handleOk" :loading="confirmLoading">确定</a-button>
                </a-col>
            </a-row>
        </a-form-model>
    </a-modal>
</template>
<script>
import { selfEvaluationTemplateRestApi } from '../../../../common/api/setting'

export default {
    data() {
        return {
            confirmLoading: false,
            level: 1,
            form: {
                name: '',
                operationGuide: '',
                score: 0,
                sortNum: 0,
                isEncourage: false,
                //TODO 正式发布的时候请将这里改成false
                isRelease: true,
                level: 1,
                parentId: null,
            },
            rules: {
                name: [{ required: true, message: '请输入评价内容', trigger: 'blur' }],
                operationGuide: [{ required: true, message: '请输入评价操作指南', trigger: 'blur' }],
                score: [{ required: true, message: '请输入分值', trigger: 'blur' }],
                sortNum: [{ required: true, message: '请输入排序', trigger: 'blur' }],
            },
        }
    },
    components: {},
    props: {
        isShowModal: {
            required: true,
            type: Boolean,
        },
        currRow: {
            required: false,
            type: [Object, undefined],
        },
        parentRow: {
            required: false,
            type: [Object, undefined],
        },
        applyYear: {
            required: true,
            type: Number,
        },
    },
    watch: {
        isShowModal: {
            immediate: true,
            handler: function (isShowModal) {
                if (isShowModal) {
                    this.beforeShowModal()
                } else {
                    this.$refs.form && this.$refs.form.resetFields()
                }
            },
        },
    },
    beforeDestroy() {
        this.$refs.form && this.$refs.form.resetFields()
    },
    methods: {
        beforeShowModal() {
            if (this.currRow) {
                let { applyYear, isEncourage, isRelease, level, name, operationGuide, parentId, score, sortNum } =
                    this.currRow

                Object.assign(this.form, {
                    applyYear,
                    isEncourage,
                    isRelease,
                    level,
                    name,
                    operationGuide,
                    parentId,
                    score,
                    sortNum,
                })
            } else if (this.parentRow) {
                let { applyYear, level, id } = this.parentRow
                console.log(level)
                Object.assign(this.form, {
                    applyYear,
                    level: level + 1,
                    parentId: id,
                    sortNum: this.parentRow.children?.length + 1 || 1,
                })
            }
        },
        async save() {
            const apiType = this.currRow ? 'edit' : 'add'
            const { applyYear, isEncourage, isRelease, level, name, operationGuide, parentId, score, sortNum } =
                this.form
            let ps = {
                isEncourage,
                isRelease,
                level: level || this.parentRow.level + 1,
                name,
                operationGuide,
                parentId: parentId || this.parentRow?.id,
                score,
                sortNum,
                applyYear: applyYear || this.applyYear,
            }

            if (this.currRow) {
                ps['id'] = this.currRow.id
            }

            await selfEvaluationTemplateRestApi[apiType](ps)
        },
        async handleOk() {
            this.confirmLoading = true
            this.$refs.form.validate(async valid => {
                console.log(valid, 'valid')
                if (valid) {
                    this.save()
                        .then(() => {
                            this.$emit('update:isShowModal', false)
                            this.$message.success('操作成功')
                            this.$emit('updateData')
                        })
                        .catch(e => {
                            console.log(e)
                            this.$message.error(e.message)
                        })
                        .finally(() => {
                            this.confirmLoading = false
                        })
                } else {
                    this.confirmLoading = false
                    return false
                }
            })
        },
        handleCancel() {
            this.$emit('update:isShowModal', false)
        },
    },
}
</script>
<style scoped></style>
